<script lang="ts" setup>
import {defineProps, onUpdated, ref} from 'vue';
import PerfumeItem from "@/components/PerfumeItem.vue";

const props = defineProps({
  title: {
    type: String,
    required: true
  },
  perfumeList: {
    type: Array,
    required: false
  }
});
const perfumes = ref([])
// console.log(props.perfumeList)
// 更新收藏状态的方法
const handleUserCollect = (index: number, newStatus: boolean) => {
  perfumes.value[index].userCollect = newStatus; // 更新收藏状态
};
onUpdated(()=>{
  perfumes.value = props.perfumeList
})
</script>

<template>
  <div class="perfume-list-box">
    <div class="title">{{ title }}</div>
    <div class="perfume-list-group">
      <div v-if="perfumes.length == 0" style="flex: 1">
        <q-skeleton height="200px" square style="flex: 1;display: flex;justify-content: center;align-items: center">暂无数据</q-skeleton>
      </div>
        <PerfumeItem
            style="margin: 0;width: 260px;margin-right: 20px;"
          v-for="(item,index) in perfumes"
          :key="index"
          :brand-id="item.brandId"
          :brand-text="item.brandText" :fragrance-note="item.fragranceNote"
          :img="item.img"
          :ingredients="item.ingredients"
          :name="item.name"
          :perfume-id="item.perfumeId"
          :price="item.price"
          :smell="item.smell"
          :user-collect="item.userCollect"
          :year="item.year"
          @updateUserCollect="handleUserCollect(index, $event)"
        />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.perfume-list-box {
  margin: 30px;
  min-height: 550px;
  .title {
    font-size: 18px;
    font-weight: bold;
  }

  .perfume-item {
    width: 100px;

  }

  .perfume-list-group {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow-x: auto;
  }
}
</style>